<template>
  <div>
  <!--        图书表单信息-->
  <el-form ref="form" :inline="true" :rules="rules" :model="form" label-width="80px">
    <el-form-item label="图书标识" prop="bookId" v-if="false">
      <el-input placeholder="请输入图书标识" v-model="form.bookId"></el-input>
    </el-form-item>
    <el-form-item label="图书名称" prop="bookName">
      <el-input placeholder="请输入图书名称" v-model="form.bookName"></el-input>
    </el-form-item>
    <el-form-item label="作者" prop="author">
      <el-input  placeholder="请输入作者姓名" v-model="form.author"></el-input>
    </el-form-item>
    <el-form-item label="出版社" prop="publisher">
      <el-input  placeholder="请输入出版社名称" v-model="form.publisher"></el-input>
    </el-form-item>
    <el-form-item label="出版时间" prop="publicationDate">
      <el-col :span="15">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.publicationDate" style="width: 100%;"></el-date-picker>
      </el-col>
    </el-form-item>
    <el-form-item label="ISBN号" prop="isbn">
      <el-input placeholder="请输入图书ISBN号" v-model="form.isbn"></el-input>
    </el-form-item>
  </el-form>
  </div>
</template>
<script>
import moment from "moment/moment";
import {addBook} from "@/api/book/book";

export default{
  props() {
    return {
      form: {
        bookName: "",
        author: "",
        publisher: "",
        publicationDate: "",
        isbn: ""
      },
      rules: {
        bookName:[ { required: true, message: '请输入图书名称', trigger: 'blur' },],
        author:[ { required: true, message: '请输入作者名称', trigger: 'blur' },],
        publisher:[ { required: true, message: '请输入出版社名称', trigger: 'blur' },],
        publicationDate:[ { required: true, message: '请输入出版社日期', trigger: 'blur' },],
        isbn:[ { required: true, message: '请输入ISBN号', trigger: 'blur' },]
      },
    }
  },
  methods: {
    //点击新增按钮，进行数据提交
    handleSubmit(){
      console.log(this.form.bookId);
      this.$refs.form.validate(valid => {
        if (valid) {
          // 构造要提交的数据对象
          const data = {
            bookId:this.form.bookId,
            bookName: this.form.bookName,
            author: this.form.author,
            publisher: this.form.publisher,
            publicationDate:  moment(this.form.publicationDate ).format('YYYY-MM-DD HH:mm:ss'),
            isbn: this.form.isbn
          };
          addBook(data).then((response)=>{
            this.$message({
              type: 'success',
              message: '新增数据成功'
            });
            // 刷新页面
            window.location.reload();
          })

        }
      })
    },
  }
}

</script>
<style>
.dialog-footer {
  text-align: right; /* 居右对齐 */
}
</style>